<template>
  <div>
    <van-nav-bar
      title="银企对账"
      left-arrow
      @click-left="onClickLeft"/>
    <div id="contentBody" class="contentBody">
      <div id="resultList" class="resultList">
        <van-list
          finished-text="没有更多了"
          error-text="请求失败，点击重新加载"
          @load="searchDataList"
        >
          <div v-for="item in dataList" :key="item.index" @click="showDetailInfo(item)">
            <table id="billList" class="billList" >
              <tr>
                <td style="padding-left: 20PX">
                  <span>{{item.date}}</span>
                </td>
                <td class="right">
                  <span :class="{'statue':item.statueCode}" style="margin-right: 10px">
                    {{item.statueCdesc}}
                  </span>
                  <span>
                    <van-icon name="arrow" />
                  </span>
                </td>
              </tr>
            </table>
          </div>
        </van-list>
      </div>
    </div>
  </div>
</template>

<script>
import {
  List,
  Cell,
  Tag,
  NavBar,
} from 'vant';
import { mapActions } from 'vuex';

export default {
  components: {
    [List.name]: List,
    [Cell.name]: Cell,
    [Tag.name]: Tag,
    [NavBar.name]: NavBar,
  },
  data() {
    return {
      activeName: 'apply',
      dataList: [],
      qryParam: {},
    };
  },
  methods: {
    ...mapActions(['changeYqdzTitle']),
    onClickLeft() {
      this.$router.go(-1);
    },
    searchDataList() {
      for (let i = 8; i > 0; i -= 1) {
        const itemInfo = {};
        itemInfo.date = `2020年0${i}月`;
        if (i > 5) {
          itemInfo.statueCdesc = '未完成';
          itemInfo.statueCode = true;
        } else {
          itemInfo.statueCdesc = '已完成';
          itemInfo.statueCode = false;
        }
        this.dataList.push(itemInfo);
      }
      console.log(this.dataList);
    },
    showDetailInfo(obj) {
      this.changeYqdzTitle(obj.statueCode);
      this.$router.push({ name: 'AccountList', params: obj });
    },
  },
  mounted() {
    //  this.getJobInfo();
  }
};
</script>

<style>
  .contentBody{
    height: 100vh;
    background-color: #f3f6f9;
    overflow-y:scroll;
  }
  .resultList{
    margin-top: 10PX;
  }
  .billList{
    width: 100%;
    margin-top: 1PX;
    background-color: white;
  }
  .billList td{
    height: 40PX;
    line-height: 40PX;
    width: 50%;
    font-size: 16PX;
  }
  .right{
    text-align: right;
    padding-right: 10PX;
  }
  .statue{
    color: #FFA060;
  }
</style>
